

<template>
  <div class="pieChart" :id="id" />
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      default: "pieChart",
    },
    title: {
      type: String,
      default: "年龄段分布",
    },
  },
  data() {
    return {
      chart: null,
      screenWidth: null,
    };
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
    this.$nextTick(() => {
      this.initChart();
      this.setOption();
    });
  },
  watch: {
    dataList: {
      handler() {
        this.$nextTick(() => {
          this.setOption();
        });
      },
      deep: true,
    },
    screenWidth: {
      handler(val) {
        this.$nextTick(() => {
          this.setOption();
        });
      },
    },
  },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return;
  //   }
  //   this.chart.dispose();
  //   this.chart = null;
  // },
  // destroyed() {
  //   clearInterval(this.setInter);
  // },
  methods: {
    initChart() {
      const chart = echarts.init(this.$el);
      this.chart = chart;
      window.addEventListener("resize", this.chart.resize);
    },
    setOption() {
      if (!this.chart) return;
      this.chart.showLoading({
        text: "loading",
        color: "rgba(20, 149, 247, 0.7)",
        textColor: "#000",
        maskColor: "rgba(255, 255, 255, 0.2)",
        zlevel: 0,
      });

      const option = {
        color: ["#C1C1C1", "#C0E5FB", "#6DD3FE", "#4580E9"],
        legend: {
          // orient: "vertical",
          left: this.screenWidth <= 750 ? "left" : "right",
          top: this.screenWidth <= 750 ? 25 : 0,
          textStyle: {
            color: "#000",
            fontSize: 16,
          },
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "20px",
        },
        title: {
          text: this.title,
          textStyle: {
            fontSize: 16,
            color: "#000",
          },
        },
        xAxis: {
          type: "value",
          scale: true,
          axisLabel: {
            formatter: "{value} %",
            minInterval: 1,
          },
        },
        yAxis: {
          type: "category",
          scale: true,
          data: this.dataList.map((item) => item.name),
          axisLabel: {
            minInterval: 1,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            const { seriesIndex, data } = params;
            let tip = "";
            switch (seriesIndex) {
              case 1:
                tip = `${data.name} 正常 : ${data.normalQty}例，${data.normalRatio}%`;
                break;
              case 2:
                tip = `${data.name} 增厚 : ${data.thickeningQty}例，${data.thickeningRatio}%`;
                break;
              case 3:
                tip = `${data.name} 斑块 : ${data.plaqueQty}例，${data.plaqueRatio}%`;
                break;
              case 4:
                tip = `${data.name} 未知 : ${data.unknownQty}例，${data.unknownRatio}%`;
                break;
            }
            return tip;
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 20,
          },
          {
            name: "正常",
            type: "bar",
            stack: "total",
            barWidth: 25,
            label: {
              show: true,
              formatter: ({ data }) => {
                return `${data.normalQty}例，${data.normalRatio}%`;
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.dataList.map((item) => {
              return {
                ...item,
                value: item.normalRatio,
              };
            }),
          },
          {
            name: "增厚",
            type: "bar",
            stack: "total",
            barWidth: 25,
            label: {
              show: true,
              formatter: ({ data }) => {
                return `${data.thickeningQty}例，${data.thickeningRatio}%`;
              },
            },
            emphasis: {
              focus: "series",
            },
            // data: this.dataList.map((item) => item.thickeningQty),
            data: this.dataList.map((item) => {
              return {
                ...item,
                value: item.thickeningRatio,
              };
            }),
          },
          {
            name: "斑块",
            type: "bar",
            stack: "total",
            barWidth: 25,
            label: {
              show: true,
              formatter: ({ data }) => {
                return `${data.plaqueQty}例，${data.plaqueRatio}%`;
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.dataList.map((item) => {
              return {
                ...item,
                value: item.plaqueRatio,
              };
            }),
          },
          {
            name: "未知",
            type: "bar",
            stack: "total",
            barWidth: 25,
            label: {
              show: true,
              formatter: ({ data }) => {
                return `${data.unknownQty}例，${data.unknownRatio}%`;
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.dataList.map((item) => {
              return {
                ...item,
                value: item.unknownRatio,
              };
            }),
          },
        ],
      };
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.hideLoading();
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.pieChart {
  width: 100%;
  height: 500px;
}
</style>
